<template>
  <div class="container">
    <!-- <el-image
      style="width: 50vw; height: 40vw;"
      :src="url"
      :preview-src-list="srcList"
      fit="cover"
    /> -->
    <img id="img" :src="url" alt="">
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { collectUserInfo } from '@/api/user'
import { useStore } from 'vuex'
export default {
  name: 'lt-details',
  setup () {
    const route = useRoute()
    const store = useStore()
    const url = route.query.url
    // 应为处理过后的高清图片
    const srcList = [
      route.query.url
    ]
    const form = {}
    onMounted(() => {
      form.userName = store.state.user.profile.userName
      form.info = store.state.user.profile.info
      form.info.push(url)
      collectUserInfo(form).then(res => {
        // console.log(res)
        form.info.length = 0
      })
    })
    // onMounted(() => {
    //   window.addEventListener('wheel', function (e) {
    //     const img = document.getElementById('img')
    //     const evt = e || window.event
    //     evt.preventDefault()
    //     let num = 0
    //     if (evt.deltaY > 0) {
    //       num = num + Math.abs(evt.deltaY / 100)
    //     } else {
    //       num = num - Math.abs(evt.deltaY / 100)
    //     }
    //     console.log(num)
    //     img.style.transform = `scale(${num})`
    //     if (evt.deltaY > 0) {
    //       console.info('向下滚动')
    //     } else {
    //       console.info('向上滚动')
    //     }
    //     console.info(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ)
    //   }, { passive: false })
    // })
    // watch(() => document.getElementById('img').style.transform.scale, addWheel(), { immediate: true })

    return { url, srcList }
  }

}
</script>

<style scoped lang='less'>
.img{
  width: 50vw;
  height: 40vw;
}
</style>
